<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站指南</title>
    <!-- 引入 marked.js 用于渲染 Markdown -->
    <script src="/RMT/Web/JS/marked.min.js"></script>
    <!-- 引入 highlight.js 用于代码高亮 -->
    <link rel="stylesheet" href="/RMT/Web/CSS/vs.min.css">
    <script src="/RMT/Web/JS/highlight.min.js"></script>
    <!-- 引入 tocbot 用于生成目录 -->
    <link rel="stylesheet" href="/RMT/Web/CSS/tocbot.css">
    <script src="/RMT/Web/JS/tocbot.min.js"></script>
    <style>
        :root {
            --color-text-primary: #333333;
            --color-text-secondary: #666666;
            --color-border-primary: #d0d7de;
            --color-border-secondary: #e1e4e8;
            --color-bg-canvas: #ffffff;
            --color-bg-canvas-inset: #f5f5f5;
            --color-accent-fg: #007acc;
            --color-accent-emphasis: #007acc;
            --color-neutral-muted: rgba(175, 184, 193, 0.2);
        }

        body {
            font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.5;
            color: var(--color-text-primary);
            background-color: var(--color-bg-canvas);
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: 250px 1fr 250px;
            min-height: 100vh;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-top: 24px;
            margin-bottom: 16px;
            font-weight: 600;
            line-height: 1.25;
        }

        h1 {
            padding-bottom: 0.3em;
            font-size: 2em;
            border-bottom: 1px solid var(--color-border-secondary);
        }

        h2 {
            padding-bottom: 0.3em;
            font-size: 1.5em;
            border-bottom: 1px solid var(--color-border-secondary);
        }

        h3 {
            font-size: 1.25em;
        }

        h4 {
            font-size: 1em;
        }

        a {
            color: var(--color-accent-fg);
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        /* 左侧导航栏 */
        .sidebar-left {
            background-color: var(--color-bg-canvas);
            padding: 16px;
            border-right: 1px solid var(--color-border-primary);
            overflow-y: auto;
            height: 100vh;
            position: sticky;
            top: 0;
        }

        .sidebar-left h2 {
            margin-top: 0;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--color-border-secondary);
            font-size: 1.25em;
        }

        .md-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .md-links li {
            margin-bottom: 8px;
            font-size: 14px;
        }

        .md-links a {
            display: block;
            padding: 6px 8px;
            border-radius: 6px;
            transition: background-color 0.2s;
            color: var(--color-text-primary);
        }

        .md-links a:hover {
            background-color: var(--color-neutral-muted);
            text-decoration: none;
        }

        .md-links a.active {
            background-color: var(--color-accent-emphasis);
            color: white;
            font-weight: 500;
        }

        /* 主内容区 */
        .main-content {
            padding: 32px;
            max-width: 800px;
            margin: 0 auto;
            width: 100%;
        }

        /* GitHub Wiki 风格的 Markdown 内容 */
        #content {
            line-height: 1.7;
            font-size: 16px;
        }

        #content p {
            margin-top: 0;
            margin-bottom: 16px;
        }

        #content code {
            font-family: "Courier New", Courier, "Lucida Console", Monaco, monospace;
            font-size: 85%;
            background-color: var(--color-bg-canvas-inset);
            padding: 0.2em 0.4em;
            border-radius: 3px;
        }

        #content pre {
            background-color: #f8f8f8;
            padding: 16px;
            border-radius: 3px;
            overflow-x: auto;
            margin-bottom: 16px;
            font-size: 85%;
            line-height: 1.45;
            border: 1px solid var(--color-border-primary);
        }

        #content pre code {
            background-color: transparent;
            padding: 0;
            border-radius: 0;
        }

        #content blockquote {
            padding: 0 1em;
            color: var(--color-text-secondary);
            border-left: 0.25em solid var(--color-border-primary);
            margin: 0 0 16px 0;
        }

        #content table {
            border-spacing: 0;
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 16px;
            display: block;
            overflow: auto;
        }

        #content th,
        #content td {
            padding: 6px 13px;
            border: 1px solid var(--color-border-primary);
        }

        #content th {
            font-weight: 600;
            background-color: var(--color-bg-canvas-inset);
        }

        #content tr:nth-child(even) {
            background-color: var(--color-bg-canvas-inset);
        }

        #content img {
            max-width: 100%;
            box-sizing: content-box;
            background-color: var(--color-bg-canvas);
        }

        #content hr {
            height: 0.25em;
            padding: 0;
            margin: 24px 0;
            background-color: var(--color-border-primary);
            border: 0;
        }

        #content code {
            font-family: "Courier New", Courier, "Lucida Console", Monaco, monospace;
            font-size: 85%;
            background-color: var(--color-bg-canvas-inset);
            padding: 0.2em 0.4em;
            border-radius: 3px;
            color: #e67e22;
            /* 深橙色，清晰可见 */
            font-weight: bold;
        }

        /* 右侧目录 */
        .sidebar-right {
            background-color: var(--color-bg-canvas);
            padding: 16px;
            border-left: 1px solid var(--color-border-primary);
            overflow-y: auto;
            height: 100vh;
            position: sticky;
            top: 0;
        }

        .sidebar-right h2 {
            margin-top: 0;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--color-border-secondary);
            font-size: 1.25em;
        }

        .js-toc {
            overflow-y: auto;
            font-size: 14px;
        }

        .toc-list {
            list-style: none;
            padding-left: 12px;
            margin: 0;
        }

        .toc-link {
            display: block;
            padding: 4px 0;
            color: var(--color-text-primary);
            transition: color 0.2s;
        }

        .toc-link:hover {
            color: var(--color-accent-fg);
            text-decoration: none;
        }

        .toc-link.is-active-link {
            font-weight: 600;
            color: var(--color-accent-fg);
        }

        .toc-list-item {
            margin-bottom: 4px;
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            body {
                grid-template-columns: 220px 1fr 220px;
            }
        }

        @media (max-width: 900px) {
            body {
                grid-template-columns: 200px 1fr;
            }

            .sidebar-right {
                display: none;
            }
        }

        @media (max-width: 768px) {
            body {
                grid-template-columns: 1fr;
            }

            .sidebar-left {
                height: auto;
                position: static;
                border-right: none;
                border-bottom: 1px solid var(--color-border-primary);
            }

            .main-content {
                padding: 16px;
            }
        }
    </style>
</head>

<body>
    <!-- 左侧导航栏 -->
    <div class="sidebar-left">
        <h2>文档导航</h2>
        <ul class="md-links">
            <li><a href="#" class="active" onclick="loadMarkdown('Web/词条介绍.md', this)">软件词条介绍</a></li>
            <li><a href="#" onclick="loadMarkdown('Web/快速上手.md', this)">快速上手指南</a></li>
            <li><a href="#" onclick="loadMarkdown('Web/手柄功能指南.md', this)">手柄功能指南</a></li>
            <li><a href="#" onclick="loadMarkdown('Web/常见问题.md', this)">常见问题</a></li>
            <li><a href="#" onclick="loadMarkdown('Web/开发指南.md', this)">开发指南</a></li>
            <li><a href="#" onclick="loadMarkdown('Web/部署说明.md', this)">部署说明</a></li>
            <li><a href="#" onclick="loadMarkdown('Web/贡献指南.md', this)">贡献指南</a></li>
        </ul>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div id="content">
            <!-- Markdown 内容将在这里渲染 -->
            <p>请点击左侧的链接查看文档内容。</p>
        </div>
    </div>

    <!-- 右侧目录 -->
    <div class="sidebar-right">
        <h2>目录</h2>
        <div class="js-toc"></div>
    </div>

    <script>
        // 配置 marked.js 以匹配 VS Code 风格
        /*marked.setOptions({
            breaks: true,
            gfm: true,
            pedantic: false,
            smartLists: true,
            smartypants: true,
            highlight: function (code, lang) {
                if (lang && hljs.getLanguage(lang)) {
                    try {
                        return hljs.highlight(lang, code).value;
                    } catch (e) {
                        console.error('代码高亮错误:', e);
                    }
                }
                return hljs.highlightAuto(code).value;
            }
        });*/

        // 确保所有依赖已加载
        function checkDependencies() {
            if (typeof marked === 'undefined' || typeof hljs === 'undefined' || typeof tocbot === 'undefined') {
                setTimeout(checkDependencies, 100);
                return;
            }

            // 所有依赖已加载，继续初始化
            initializeApp();
        }

        function initializeApp() {
            // 配置 marked.js
            marked.setOptions({
                breaks: true,
                gfm: true,
                pedantic: false,
                smartLists: true,
                smartypants: true,
                highlight: function (code, lang) {
                    if (lang && hljs.getLanguage(lang)) {
                        try {
                            return hljs.highlight(lang, code).value;
                        } catch (e) {
                            console.error('代码高亮错误:', e);
                        }
                    }
                    return hljs.highlightAuto(code).value;
                }
            });

            // 其他初始化代码...
            document.addEventListener('DOMContentLoaded', function () {
                hljs.highlightAll();
                loadMarkdown('Web/词条介绍.md');

                setTimeout(function () {
                    if (window.location.hash) {
                        const targetElement = document.querySelector(window.location.hash);
                        if (targetElement) {
                            const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - 70;
                            window.scrollTo({
                                top: targetPosition,
                                behavior: 'smooth'
                            });
                        }
                    }
                }, 500);
            });
        }

        // 启动依赖检查
        checkDependencies();

        // 加载并渲染 Markdown
        function loadMarkdown(filePath, linkElement = null) {
            // 更新活动链接样式
            if (linkElement) {
                document.querySelectorAll('.md-links a').forEach(a => {
                    a.classList.remove('active');
                });
                linkElement.classList.add('active');
            }

            fetch(filePath)
                .then(response => {
                    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                    return response.text();
                })
                .then(text => {
                    // 使用 marked.js 渲染 Markdown
                    document.getElementById('content').innerHTML = marked.parse(text);

                    // 高亮所有代码块
                    document.querySelectorAll('pre code').forEach((block) => {
                        hljs.highlightElement(block);
                    });

                    // 渲染完成后生成目录
                    generateTOC();
                })
                .catch(error => {
                    console.error('加载 Markdown 文件错误:', error);
                    document.getElementById('content').innerHTML =
                        `<div style="color:#cf222e; padding:16px; border:1px solid #ffebe9; background-color:#ffebe9; border-radius:6px;">
                            <h3 style="margin-top:0;">加载文件失败</h3>
                            <p><strong>文件路径:</strong> ${filePath}</p>
                            <p><strong>错误信息:</strong> ${error.message}</p>
                        </div>`;
                });
        }

        // 生成目录
        function generateTOC() {
            // 确保内容已渲染
            setTimeout(() => {
                // 先销毁现有的 tocbot 实例
                if (window.tocbot) {
                    tocbot.destroy();
                }

                // 为所有标题添加ID（如果marked没有自动添加）
                const headings = document.querySelectorAll('#content h1, #content h2, #content h3, #content h4');
                headings.forEach(heading => {
                    if (!heading.id) {
                        heading.id = heading.textContent
                            .toLowerCase()
                            .replace(/[^\w\u4e00-\u9fa5]+/g, '-')
                            .replace(/^-+|-+$/g, '');
                    }
                });

                // 重新初始化 tocbot
                tocbot.init({
                    tocSelector: '.js-toc',
                    contentSelector: '#content',
                    headingSelector: 'h1, h2, h3, h4',
                    headingsOffset: 70,       // 考虑顶部固定元素的高度
                    scrollSmoothOffset: -70,   // 滚动偏移量
                    collapseDepth: 2,
                    listClass: 'toc-list',
                    listItemClass: 'toc-list-item',
                    linkClass: 'toc-link',
                    activeLinkClass: 'is-active-link',
                    // 自定义滚动行为
                    scrollEndCallback: function (e) {
                        // 更新URL哈希而不触发滚动
                        history.replaceState(null, null, e.hash);
                    }
                });

                // 为目录链接添加点击事件，覆盖tocbot的默认行为以实现更好的控制
                const tocLinks = document.querySelectorAll('.toc-link');
                tocLinks.forEach(link => {
                    link.addEventListener('click', function (e) {
                        e.preventDefault();
                        const targetId = this.getAttribute('href');
                        if (targetId) {
                            const targetElement = document.querySelector(targetId);
                            if (targetElement) {
                                // 计算目标位置，考虑顶部固定导航栏的高度
                                const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - 70;

                                // 平滑滚动
                                window.scrollTo({
                                    top: targetPosition,
                                    behavior: 'smooth'
                                });

                                // 更新URL哈希
                                history.replaceState(null, null, targetId);
                            }
                        }
                    });
                });
            }, 100);
        }

        // 页面加载完成后自动显示"词条介绍"内容
        document.addEventListener('DOMContentLoaded', function () {
            // 初始化 highlight.js
            hljs.highlightAll();

            // 加载默认文档
            loadMarkdown('Web/词条介绍.md');

            // 检查URL哈希并滚动到对应位置
            setTimeout(function () {
                if (window.location.hash) {
                    const targetElement = document.querySelector(window.location.hash);
                    if (targetElement) {
                        const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - 70;
                        window.scrollTo({
                            top: targetPosition,
                            behavior: 'smooth'
                        });
                    }
                }
            }, 500); // 稍等一会儿确保内容加载完成
        });
    </script>
</body>

</html>